<template>
    <div class="layout-login">
        <div class="layout-content-main">
            <div class="logintitle">小程序后台管理系统</div>
            <Form
                ref="formValidate"
                :model="formValidate"
                :rules="ruleValidate"
                class="loginform"
            >
                <FormItem prop="name">
                    <Input
                        type="text"
                        v-model="formValidate.name"
                        placeholder="输入用户名"
                        class="input-select-class"
                    ></Input>
                </FormItem>
                <FormItem prop="pass">
                    <Input
                        type="password"
                        v-model="formValidate.pass"
                        placeholder="输入登录密码"
                        class="input-select-class"
                    ></Input>
                </FormItem>
                <FormItem>
                    <Button
                        type="primary"
                        size="large"
                        long
                        @click="login('formValidate')"
                        >登录</Button
                    >
                </FormItem>
            </Form>
        </div>
        <div class="layout-copy">
            Copyright © 51job. All Rights Reserved.
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formValidate: {
                name: '',
                pass: ''
            },
            ruleValidate: {
                name: [
                    {
                        required: true,
                        message: '姓名不能为空',
                        trigger: 'blur'
                    }
                ],
                pass: [
                    {
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    },
                    {
                        type: 'string',
                        message: '密码格式不正确',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    methods: {
        login() {
            this.$refs.formValidate.validate(valid => {
                if (valid) {
                    var self = this
                    $.ajax({
                        url:
                            'https://evp.51job.com/51job/api/51miniadmin/back.php?action=login',
                        data: {
                            username: this.formValidate.name,
                            password: this.formValidate.pass
                        },
                        type: 'POST',
                        dataType: 'json',
                        success: function(data) {
                            if (data.code == 1) {
                                console.log(
                                    data.authorize,
                                    self.formValidate.name
                                )
                                localStorage.setItem(
                                    'islogin',
                                    self.formValidate.name
                                )
                                self.$store
                                    .dispatch('login', self.formValidate.name)
                                    .then(() => {
                                        // 正式时用
                                        localStorage.setItem('authorize', data.authorize)
                                        localStorage.setItem('uid', data.uid)
                                        if (data.authorize == 0) {
                                            self.$router.push('/')
                                        } else {
                                            self.$router.push('/项目列表')
                                        }
                                    })
                            } else {
                                self.$Message.error(data.msg)
                            }
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>
<style scoped>
.layout-login {
    background: url('../images/bg.jpg');
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
}

.hidden {
    display: none;
}

.layout-content-main {
    margin-left: 60%;
    margin-top: 120px;
    background: white;
    width: 400px;
    height: 480px;
    padding: 0 40px;
}

.logintitle {
    font-size: 30px;
    color: #666666;
    letter-spacing: 1px;
    text-align: center;
    padding: 45px 0;
}

.input-select-class {
    width: 320px;
    height: 60px;
    border: none;
    margin: 0 auto;
}

.loginform .ivu-form-item {
    text-align: center;
}
</style>
